<template>
  <!-- 登陆页 -->
  <div class="login-loginPage">
    <a-spin size="large" wrapperClassName="login-loginPage-loading"
            :spinning="spinning">
    <a-row class="login-loginPage-main"
        type="flex"
        justify="center"
        align="middle">
      <a-col :span="16" class="login-loginPage-box">
        <a-row class="login-loginPage-contant">
          <a-col :span="12" class="login-propaganda-router">
            <router-view name="login_propaganda"></router-view>
          </a-col>
          <a-col :span="12">
            <router-view name="login_way"></router-view>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row class="login-loginPage-foot">

    </a-row>
    </a-spin>
  </div>
</template>

<script>
  export default {
    name: 'LoginPage',
    data() {
      return {
        spinning: false, // 是否为加载中状态
      }
    },
    methods: {
      changeLoadingStatus() {
        this.spinning = !this.spinning
      }
    },
    provide() {
      return{
        changeLoadingStatus: this.changeLoadingStatus
      }
    }
  }
</script>

<style lang="less" scoped>
  .login-loginPage{
    width: 100%;
    height: 100%;

    :deep(.login-loginPage-loading) {
      width: 100%!important;
      height: 100%!important;
      .ant-spin {
        max-height: 100%!important;
      }
      .ant-spin-container{
        height: 100%!important;
      }
    }
    .login-loginPage-main{
      height: 88%;
      .login-loginPage-box{
        height: 82%;
        box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 30%);
        .login-loginPage-contant{
          height: 100%;
          .login-propaganda-router {
            color: #ffffff;
            padding: 80px 80px 48px;
            background: linear-gradient(0deg, #3a485a 0%, #607089 100%);
            &::before{
              background: url("../../assets/images/login/propaganda_before.png") no-repeat 0 0;
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
            }
            &::after{
              background: url("../../assets/images/login/propaganda_after.png") no-repeat right bottom;
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
            }

          }
        }
      }
    }
    .login-loginPage-foot{
      height: 12%;
    }
  }

</style>
